<template>
	<view>
		<view class="waterCard" style="margin-bottom: 48rpx;background-image: url(https://images-1256063599.cos.ap-shanghai.myqcloud.com/sbz/bg.png);">
			<block v-if="binded=='yes'">
				<view style="padding-left: 44rpx;margin-top: 50rpx;">
					<text style="margin-right: 47rpx;">户名</text>
					<text>{{card.name}}</text>
				</view>
				<view style="padding-left: 44rpx;margin-top: 30rpx;">
					<text style="margin-right: 47rpx;">地址</text>
					<text style="line-height: 21rpx;">{{card.addr}}</text>
				</view>
				<center style="position: absolute;bottom: 20rpx;width:100%">
					<button @tap="gotoMyuse" size="mini" class="btn-ghost" style="width:300rpx">水费查询</button>
				</center>
				<image v-if="card.type==1" src="../../static/images/index/personel.png" mode="widthFix" class="type"></image>
				<image v-else-if="card.type==2" src="../../static/images/index/company.png" mode="widthFix" class="type"></image>
			</block>
			<view v-else-if="binded=='no'" class="horizontal" style="justify-content: space-evenly;height: 100%;">
				<navigator url="../bindCard/bindCard" class="vertical">
					<image style="width: 112rpx;height: 112rpx;" class="circle" src="../../static/images/index/+.png" mode="widthFix"></image>
					<view class="btn-txt">绑定房号</view>
				</navigator>
			</view>
		</view>
		
		<view class="gst" style="text-align: center;width:100%; position: absolute;transform: translate(-50%, -50%);left:50%;top:50%" 
		v-if="binded=='no'">请先绑定房号</view>
		
		<block v-if="binded=='yes'">
			<v-tabs lineColor="black" fixed v-model="activeTab" :scroll="false" :tabs="['公示公告', '水质公告']"
				line-height="0" @change="changeTab">
			</v-tabs>
			<block v-for="cur in 2" :key="cur">
				<view v-show="activeTab==cur">
					<uni-list v-if="curList.list.length>0">
						<uni-list-item v-for="(record, idx) in curList.list" :key="idx" :title="record.title" 
						 clickable @click="goDetail($event, record.id)">
							<view slot="right" class="gst">{{record.publishTime | smartTime('YY-mm-dd')}}</view>
						</uni-list-item>
					</uni-list>
					<view class="vertical" v-else-if="curList.total===0" style="margin: 320rpx 0;">
						<image class="no-records-icon" src="../../static/icons/empty.png" mode="widthFix"></image>
						<view class="gst">暂时没有公告记录~~</view>
					</view>
				</view>
			</block>
		</block>
		
		<view style="" class="block bottom">
			<!-- 底部导航功能 -->
			<uni-grid :column="2" :showBorder="false" :square="false">
<!-- 				<uni-grid-item @tap="gotoQuery">
					<image class="btn-icon" src="../../static/images/index/query.png" mode="widthFix"></image>
					<text class="btn-text">水费查询</text>
				</uni-grid-item> -->
				<uni-grid-item :url="`../yewus/yewus?binded=${binded}`">
					<image class="btn-icon" src="../../static/images/index/banli.png" mode="widthFix"></image>
					<text class="btn-text">业务办理</text>
				</uni-grid-item>
				<uni-grid-item url="../ucenter/ucenter">
					<button :open-type="phone==''?'getPhoneNumber':''" @getphonenumber="getPhone" class="btn vertical">
						<image class="btn-icon" src="../../static/images/index/ucenter.png" mode="widthFix"></image>
						<text class="btn-text">个人中心</text>
					</button>
				</uni-grid-item>			
			</uni-grid>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import hgCell from '@/components/hg-cell/hg-cell.vue'
	import Request from '@/static/request.js'
	import vTabs from '@/components/v-tabs/v-tabs.vue'
	
	const app = getApp()
	const request = new Request(app.globalData.url)
	
	const url = 'https://api.isaim.cn/citizenry/citizen/'
	
	
	export default {
		components:{
			hgCell, vTabs,
		},
		onPullDownRefresh() {
			// 获取公告列表
			const url = this.activeTab==0?'bulletinBoard':'waterQualityReport'
			const list = this.curList
			this.refreshRecord(list, app.globalData.curl + url)
		},
		computed:{
			curList(){
				switch(this.activeTab){
					case 0:
					return this.bullets
					case 1:
					return this.waters
					default:
					return {list:[]}
				}
			}
		},
		data() {
			return {
				// 公示公告
				bullets:{
					pageNum: 1,  	// 当前页数
					pageSize: '', 	// 当前页数量(
					totalPage: '', 	// 总页数
					total: '', 		// 总记录数
					list:[
						
					]
				},
				// 水质报告列表
				waters:{
					pageNum: 1,  	// 当前页数
					pageSize: '', 	// 当前页数量(
					totalPage: '', 	// 总页数
					total: '', 		// 总记录数
					list:[
						
					]
				},
				activeTab: 0,
				phone: '',
				binded: '',
				card:{
					type: '',
					addr: '',
					name: ''
				},
				token: app.globalData.token,
			}
		},
		async created(){
			const logined = await this.assertLogin()
			if(!logined){
				await this.assertLogin()
			}
			this.getPhone()
			this.getDefaultCard()
		},
		// 更新表卡
		onShow() {
			if(app.globalData.token) this.getDefaultCard()
			// 获取公告列表
			const url = this.activeTab==0?'bulletinBoard':'waterQualityReport'
			const list = this.curList
			this.refreshRecord(list, app.globalData.curl + url)
		},
		methods: {
			getPhone(){
				uni.request({
					header:{
						Authorization: 'Bearer '+app.globalData.token,
					},
					url: app.globalData.url + 'getPhone',
					method: 'POST',
					success: res => {
						const {data} = res
						console.log('aaaa', data)
						if(data.code == 200){
							this.phone = data.data
						}else{
							uni.showToast({
								title: data.message,
								icon:'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: err.errMsg,
							icon:'none'
						});
						console.error(err)
					},
				});
			},
			gotoQuery(){
				if(this.binded=='yes'){
					uni.navigateTo({
						url: '../query/query',
					});
				}else if(this.binded=='no'){
					uni.showToast({
						title: '请先绑定房号，或进行开通',
						icon:'none'
					});
				}
			},
			goDetail(evt, id){
				if(this.activeTab==0){
					uni.navigateTo({
						url: `../bullet_detail/bullet_detail?id=${id}`,
					});
				}else if(this.activeTab==1){
					uni.navigateTo({
						url: `../water_detail/water_detail?id=${id}`,
					});
				}
			},
			// 拉取早起的历史数据
			pullNewRecord(list, url, extra={}, desc=false){
				console.log(list)
				uni.request({
					header:{
						Authorization: 'Bearer '+app.globalData.token,
					},
					url,
					method: 'GET',
					data: {
						page: list.pageNum || 1,
						size: list.pageSize || 10,
						...extra,
					},
					success: res => {
						const {data} = res
						uni.hideLoading()
						if(data.code==200){
							console.log(data)
							const d = data.data
							list.totalPage=d.totalPage
							list.total=d.total
							if(d.total>list.list.length){
								list.pageNum++
								if(d.list.length>0){
									if(desc){
										list.list.unshift(...d.list.reverse())
									}else{
										list.list.push(...d.list)
									}
								}
							}
						}else if(data.code==500){
							uni.showToast({
								icon:'none',
								title: data.message,
							})
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			// 刷新数据
			refreshRecord(list, url, extra={}){
				uni.request({
					header:{
						Authorization: 'Bearer '+app.globalData.token,
					},
					url,
					method: 'GET',
					data: {
						page: 1,
						size: 10,
						...extra,
					},
					success: res => {
						const {data} = res
						console.log(data)
						if(data.code==200){
							const d = data.data
							list.totalPage=d.totalPage
							list.total=d.total
							// 直接重置数组
							list.list=data.data.list
							uni.stopPullDownRefresh()
							uni.hideLoading()
						}else if(data.code==500){
							uni.showToast({
								icon:'none',
								title: data.message,
							})
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			changeTab(e){
				this.activeTab=e
				const url = e==0?'bulletinBoard':'waterQualityReport'
				const list = this.curList
				this.refreshRecord(list, app.globalData.curl + url)
			},

			async assertLogin(){
				// 检查本地是否存在Token
				let token = uni.getStorageSync('token')
				let relogin = false
				if(token){
					const [err, res] = await uni.checkSession()
					if(err){
						relogin = true
					}
				}else{
					// 不存在登录凭证重新登录
					relogin = true
				}
				console.log(relogin)
				if(relogin){
					// 需重新登录
					const [err, res] = await uni.login()
					if(err){
						console.error(err)
						return false
					}
					if(res.code){
						uni.setStorageSync('code', res.code)
						const [err, {data}] = await uni.request({
							url: app.globalData.url+'login',
							method: 'POST',
							data:{
								code: res.code, 
							}
						})
						if(err){
							console.error(err)
							return false
						}
						console.log(data)
						if(data.code==200){
							uni.setStorageSync('token', data.data)
							this.token=app.globalData.token=data.data
							return true
						}else if(data.code==500){
							uni.showToast({
								icon:'none',
								title: res.message,
							});
							return false
						}else if(data.code==401){
							this.token = ''
							app.globalData.token = ''
							uni.clearStorageSync('token')
							return false
						}
					}
				}
			},
			
			async getDefaultCard(){
				console.log(app.globalData.token)
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token, 
					},
					url: app.globalData.url + 'defaultWaterCard',
					method: 'GET',
					data: {},
					success: res => {
						const {data} = res
						console.log(data)
						if(data.code==200){
							this.binded='yes'
							this.card.name = data.data.roomMaster
							this.card.addr = data.data.address.roomAddress
							this.card.type = data.data.type
							this.phone = data.data.phone
						}else if(data.code==500){
							this.binded='no'
						}else if(data.code==401){
							uni.clearStorageSync('token')
							this.token = '';
							this.relogin();
							this.assertLogin().then(()=>this.getDefaultCard());
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			
			reject(){
				this.phone_auth=false
			},
			
			gotoBind(){
				uni.navigateTo({
					url:'../bindCard/bindCard'
				})
			},
			gotoProgress(){
				uni.navigateTo({
					url:'../progress/progress'
				})
			},
			gotoMyuse(){
				uni.navigateTo({
					url:'../myuse/myuse'
				})
			},
		}
	}
</script>

<style scoped>
	.btn-txt{
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		color: #FFFFFF;
	}
	
	.type{
		width: 128rpx;
		height: 64rpx;
		position: absolute;
		right: 0;
		top: 36rpx;
	}
	
	#ggl{
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #666666;
	}
	
	.btn-ghost{
		background-color: transparent;
		border: solid 1px white;
		color: white;
		border-radius: 10rpx;
	}

	
	.content-text{
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
		text-align: left;
		margin: auto;
	}
	
	.block{
		background-color: white;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
	
	.waterCard{
		width: 700rpx;
		height: 330rpx;
		box-shadow: 0 20rpx 30rpx 0 rgba(0, 132, 255, 0.2);
		border-radius: 24rpx;
		overflow: hidden;
		background-size: 100%;
		color: white;
		font-size: 36rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		position: relative;
	}
	
	.board{
		border: solid 1px gray;
		border-radius: 10rpx;
		overflow: scroll;
		scroll-behavior: auto;
	}
	
	.board-content{
		overflow: scroll;
		scroll-behavior: auto;
		word-break: break-all;
		word-wrap: break-word;
	}
	
	.board-title{
		background-color: lightgray;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		vertical-align: middle;
	}
	
	.center{
		text-align: center;
	}
	
	.btn-circle{
		display: inline-block;
		border-radius: 50% 50%;
		overflow: hidden;
	}
	
	#btnAdd{
		width: 150rpx;
	}
	
	page{
		background-color: #F7F7F7;
	}
	
	.nav-bar{
		height: 50rpx;
		line-height: 50rpx;
		font-size: small;
		background-color: lightgray;
	}
	
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
	
	.modal{
		position: absolute;
		width: 80%;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: space-between;
		left: 50%;
		top:50%;
		transform: translate(-50%, -50%);
		z-index: 9999;
		border-radius: 20rpx;
		background-color: white;
		color: black;
	}
	
	.modal>.content{
		padding: 20rpx;
		min-height: 200rpx;
	}
	
	.modal>.head{
		text-align: center;
		line-height: 50rpx;
	}
	
	.modal>.btns{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		text-align: center;
	}
	
	.modal>.btns>.btn{
		flex:1;
		flex-grow: 1;
		flex-shrink: 1;
	}
	
	.modal>.btns>button{
		flex:1;
		flex-grow: 1;
		flex-shrink: 1;
	}
</style>
